<template>
  <view class="card-box bg-linear-common-self">
    <view class="title">
      <view class="text">{{ data.proName }}</view>
    </view>
    <view class="footer-box">
      <view class="bottom-btn">
        <button class="cancelBtn small" type="default" size="mini" @click.stop="editFun(data)">
          编辑
        </button>

        <button class="cancelBtn small" type="default" size="mini" @click.stop="deleteFun(data)">
          删除
        </button>
        <button class="cancelBtn small" type="primary" size="mini" @click.stop="linkSupplier(data)">
          关联供应商
        </button>
      </view>
    </view>
  </view>
</template>
<script>
  import { toast } from '@/utils/common.js';
  import {
    getProductById,
    deleteProduct,
    getProductByEnterId
  } from '@/api/product';
  export default {
    name: 'product-card',
    props: {
      data: {
        type: Object,
        value: {}
      }
    },
    methods: {
      editFun(item, type) {
        uni.setStorageSync('title', '添加产品');
        uni.navigateTo({
          url: '/packageA/pages/common/product-editting/index?id=' + item.id
        });
      },
      deleteFun(item) {
        uni.showModal({
          title: '系统提示',
          content: '确认删除该产品？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) this.deleteProduct(item.id);
          }
        });
      },
      async deleteProduct(id) {
        const res = await deleteProduct(id);
        if (res?.code === 0) {
          toast('删除成功');
          this.$emit("successFun")
        } else {
          toast('删除失败');
        }
      },
      linkSupplier(item) {
        uni.redirectTo({
          url: '/packageA/pages/product/records?id=' + item.id
        });
      },
    }
  };
</script>
<style lang="scss" scoped>
  .card-box {
    padding: 26.67rpx 17.78rpx;
    border-radius: 17.78rpx;
    box-shadow: 0 0 17.78rpx rgba(0, 0, 0, 0.1);

    >view+view {
      margin-top: 10rpx;
    }

    .title {
      display: flex;
      justify-content: space-between;

      .text {
        font-size: 32rpx;
        font-weight: bold;
      }

      .sub-text {
        color: #333333;
        font-size: 24.89rpx;
      }
    }

    .table {
      display: flex;
      padding: 8rpx 0;
      border-radius: 7.11rpx;
      background-color: #f1f2f5;

      >view {
        padding: 0 28rpx;

        >view:first-child {
          text-align: center;
          line-height: 39.11rpx;
          font-size: 17.78rpx;
          color: #999999;
        }

        >view:nth-child(2) {
          text-align: center;
          font-size: 24.89rpx;
          line-height: 39.11rpx;
          font-weight: 700;
          color: #333333;
        }
      }
    }

    .footer-box {
      margin-top: 14px;

      .time {
        color: #999999;
      }

      .bottom-btn {
        text-align: right;
      }

      .link {
        cursor: pointer;
      }
    }
  }

  .phxx-list .item+.item {
    margin-top: 10px;
  }

  .card-box {
    padding: 26.67rpx 17.78rpx;
    border-radius: 17.78rpx;
    box-shadow: 0 0 17.78rpx rgba(0, 0, 0, 0.1);
  }

  .bg-linear-common-self {
    /* background: linear-gradient(180deg, #e8f3ff, white 100%); */
  }

  button[type="default"] {
    margin-left: 5px;
    font-size: 24.88rpx !important;
    color: #409eff !important;
    border: 1px solid #409eff !important;
    background-color: #ffffff !important;
  }

  button[type="primary"] {
    margin-left: 5px;
    color: #fff !important;
    border: 1px solid #409eff !important;
    background-color: #409eff !important;
  }
</style>